import { FC, useState } from "react"
import styles from "./index.less"
import HospitalizedInformation from "../HospitalizedInformation"
import MedicalAdvice from "@/components/patientsCom//MedicalAdvice"
import TestReport from "@/components/patientsCom//TestReport"
import CheckReport from "@/components/patientsCom//CheckReport"
import PersonalRecords from "../PersonalRecords"
import MedicalRecords from "@/components/patientsCom//MedicalRecords"
import SurgicalRecords from "@/components/patientsCom//SurgicalRecords"
import NursingRecords from "@/components/patientsCom//NursingRecords"
import AdviceCloseLoop from "../AdviceCloseLoop"
import MutilTabs, { IMutilTabsProps } from "@/components/MutilTabs/index"


const topTabs: FC = () => {

  const [tabValue, setTabValue] = useState<string>("0")

  const handlerTabs = (key: string) => {
    setTabValue(key)
  }
  const tabsListTabPaneProps: IMutilTabsProps = {
    tabValue: tabValue,
    tabsAtrrs: {
      className: `${styles.borderCard} ${styles.topTabsKu}`,
      onChange: (key: string) => { handlerTabs(key) },
    },
    columns: [
      {
        className: `${styles.tabsTabItem}`,
        tab: "就诊信息",
        children: <div className={styles.tabsBodyBox}><HospitalizedInformation /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "医嘱",
        children: <div className={styles.tabsBodyBox}><MedicalAdvice /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "检验报告",
        children: <div className={styles.tabsBodyBox}><TestReport /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "检查报告",
        children: <div className={styles.tabsBodyBox}><CheckReport /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "病历记录",
        children: <div className={styles.tabsBodyBox}><MedicalRecords /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "手术记录",
        children: <div className={styles.tabsBodyBox}><SurgicalRecords /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "护理记录",
        children: <div className={styles.tabsBodyBox}><NursingRecords /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "医嘱闭环",
        children: <div className={styles.tabsBodyBox}><AdviceCloseLoop /></div>
      },
      {
        className: `${styles.tabsTabItem}`,
        tab: "个人档案",
        children: <div className={styles.tabsBodyBox}><PersonalRecords /></div>
      }
    ]
  }

  return (
    <div className={`${styles.topTabs}`}>
      {
        MutilTabs(tabsListTabPaneProps)
      }
    </div>
  )
}

export default topTabs